<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <title>模态框</title>
    <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/popper.js"></script>
    <script src="../js/html5shiv.js"></script>
    <script src="../js/respondjs.js"></script>
    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js/bootstrap.js"></script>
    <style>
        .modal-backdrop {
            opacity: .3;
        }

        .modal-dialog {
            position: absolute;
            top: 50%;
            height: 300px;
            width: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .modal-footer {
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            //页面da开就显示加载modal
            //$(".modal").modal();
        });
    </script>
</head>
<body>
<div class="container">
    <!--
         data-toggle:点击切换modal显示，是给js用的
         modal:是类样式
         modal-dialog：模态框的对话框
         modal-content：模态框的内容
         modal-header：内容的头部
         modal-body：内容的主体
         modal-footer：内容的底部，默认text-right
         data-dismiss:点击让modal不显示，是给js用的
         modal-backdrop：是黑色的蒙层，是js动态添加的div
     -->
    <!-- 触发的按钮 -->
    <a href="#mymodal" type="button" class="btn btn-primary" data-toggle="modal">点击弹框</a>
    <!-- 模态框 -->
    <div id="mymodal" class="modal">
        <!-- 对话框 -->1
        <div class="modal-dialog">
            <!-- 中的内容 -->
            <div class="modal-content">
                <!-- 内容上 -->
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal">×</button>
                    <h3 class="modal-title">温馨提示</h3>
                </div>
                <!-- 内容中 -->
                <div class="modal-body">
                    <p> 我是内容。。。。</p>
                </div>
                <!-- 内容下 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success btn-sm" data-dismiss="modal">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
